<template>
    <div>
      <!-- 添加角色输入框 -->
        <div class="permissManaTool">
          <el-input size="small" placeholder="请输入角色英文名" v-model="role.name">
              <template slot="prepend">ROLE_</template>
          </el-input>
          <el-input size="small" placeholder="请输入角色中文名" v-model="role.nameZh" @keydown.enter.native="doAddRole"></el-input>
          <el-button type="primary" size="small" icon="el-icon-plus" @click="doAddRole">添加角色</el-button>
        </div>

        <!-- 折叠面板 -->
        <div style="margin-top: 10px;width: 700px">
        	<!-- element-ui 折叠面板 手风琴模式 只展开一个 activename=-1则不展开 等于1则展开第一个 -->
            <el-collapse  accordion @change="change" v-model="activeName">
            <el-collapse-item :title="r.nameZh" :name="r.id" v-for="(r,index) in roles" :key="index">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>可访问的资源</span>
                        <el-button style="float: right; padding: 3px 0;color: red" type="text" icon="el-icon-delete"
                         @click="deleteRole(r)"></el-button>
                    </div>
                    <div >
                      <!-- show-checkbox 显示勾选框 -->
                      <!-- ref="tree" 相对于取了个名字，待会根据这个名字就可以查找这个元素 -->
                        <el-tree
                                show-checkbox
                                node-key="id"
                                ref="tree"
                                :key="index"
                                :default-checked-keys="selectedMenus"
                                :data="allMenus"
                                :props="defaultProps" >
                        </el-tree>
                        <div style="display: flex;justify-content: flex-end">
                                <el-button size="small" @click="cancelUpdate">取消修改</el-button>
                                <el-button size="small" type="primary" @click="doUpdate(r.id,index)">确认修改</el-button>
                        </div>
                    </div>
                  </el-card>
                </el-collapse-item>
              </el-collapse>
          </div>
    </div>
  </template>
  
  <script>
    export default{
      data() {
        return {
          role:{  //添加角色数据
              name:'',
              nameZh:''
          },
          roles:[],  //角色数据
          allMenus:[], //所有菜单数据
          activeName:-1,  //折叠面板 -1表示不展开
          selectedMenus:[], //选中的菜单项
          defaultProps: {   //绑定结点的数据
              children: 'children',
              label: 'name'
          }
        }
      },
      mounted(){
        //一进入页面就调用获取角色的方法
          this.initRoles();
      },
      methods: {
        //删除角色
        deleteRole(role){
            this.$confirm('此操作将永久删除【' + role.nameZh + '】角色, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.deleteRequest("/system/basic/permiss/role/" + role.id).then(resp=>{
                    if (resp) {
                        this.initRoles();
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        //添加角色
        doAddRole(){
            if (this.role.name && this.role.nameZh) {
                this.postRequest("/system/basic/permiss/role", this.role).then(resp => {
                    if (resp) {
                        this.role.name = '';
                        this.role.nameZh = '';
                        this.initRoles();
                    }
                })
            }else {
                this.$message.error("数据不可以为空")
            }
        },
        //取消修改，然后收起折叠面板
        cancelUpdate(){
          this.activeName=-1;
        },
        //更新操作
        doUpdate(rid,index){
          //获取结点值
          let tree = this.$refs.tree[index]; 
          //为true时表示返回目前被选中节点的key所组成的数组
          let selectKeys = tree.getCheckedKeys(true);
          let url = '/system/basic/permiss/?rid=' + rid;
          selectKeys.forEach(key=>{
            url += '&mids=' + key;
          })
          this.putRequest(url).then(resp=>{
              if (resp) {
                //更新完成后收起折叠面板
                  this.activeName=-1; 
              }
          })
        },
        //获取某个角色拥有的菜单数据 用于显示勾中状态
        initSelectedMenus(rid){
            this.getRequest("/system/basic/permiss/mids/"+rid).then(resp=>{
              if (resp) {
                  this.selectedMenus = resp;
              }
            })
        },
        //折叠面板点击事件，展开时加载数据
        change(rid){
          if(rid){
            this.initAllMenus(); //加载所有菜单项
            this.initSelectedMenus(rid);  //加载角色用户的菜单项，用户默认勾选
          }
        },
        //获取所有菜单
        initAllMenus(){
          this.getRequest("/system/basic/permiss/menus/").then(resp=>{
            if(resp){
              this.allMenus = resp;
            }
          })

        },
        //获取角色
        initRoles(){
            this.getRequest("/system/basic/permiss/").then(resp=>{
                if (resp) {
                    this.roles=resp;
                }
            })
        }

      },
    }
  </script>
  
  <style scoped>
    /* 添加输入框的样式 */
   .permissManaTool{
        display: flex;
        justify-content: flex-start;
    }
    .permissManaTool .el-input{
    width: 300px;
    margin-right: 10px;
    }


  </style>
  